<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from aqvatarius.com/themes/aquarius_v17/forms.html by HTTrack Website Copier/3.x [XR&CO'2013], Fri, 03 Jan 2014 16:42:42 GMT -->
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->

    <title>Forms stuff - Aquarius - responsive admin panel</title>

    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
        <link href="css/ie7.css" rel="stylesheet" type="text/css" />
    <![endif]-->    
    <link rel='stylesheet' type='text/css' href='css/fullcalendar.print.css' media='print' />
    
    <script type='text/javascript' src='js/plugins/jquery/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.2.1.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery.mousewheel.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/cookie/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/bootstrap.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.js'></script>    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.stack.js'></script>    
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.pie.js'></script>
    <script type='text/javascript' src='js/plugins/charts/jquery.flot.resize.js'></script>
    
    <script type='text/javascript' src='js/plugins/sparklines/jquery.sparkline.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fullcalendar/fullcalendar.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/select2/select2.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/uniform/uniform.js'></script>
    
    <script type='text/javascript' src='js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/validation/languages/jquery.validationEngine-en.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/plugins/validation/jquery.validationEngine.js' charset='utf-8'></script>
    
    <script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
    <script type='text/javascript' src='js/plugins/animatedprogressbar/animated_progressbar.js'></script>
    
    <script type='text/javascript' src='js/plugins/qtip/jquery.qtip-1.0.0-rc3.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/cleditor/jquery.cleditor.js'></script>
    
    <script type='text/javascript' src='js/plugins/dataTables/jquery.dataTables.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/fancybox/jquery.fancybox.pack.js'></script>
    
    <script type='text/javascript' src='js/plugins/multiselect/jquery.multi-select.js'></script>
    <script type='text/javascript' src='js/plugins/tagsinput/jquery.tagsinput.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/pnotify/jquery.pnotify.min.js'></script>
    <script type='text/javascript' src='js/plugins/ibutton/jquery.ibutton.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/scrollup/jquery.scrollUp.min.js'></script>
    
    <script type='text/javascript' src='js/cookies.js'></script>
    <script type='text/javascript' src='js/actions.js'></script>
    <script type='text/javascript' src='js/charts.js'></script>
    <script type='text/javascript' src='js/plugins.js'></script>
    <script type='text/javascript' src='js/settings.js'></script>
    
</head>
<body>
    <div class="wrapper"> 

        <div class="header">
            <a class="logo" href="index.html"><img src="img/logo.png" alt="Aquarius -  responsive admin panel" title="Aquarius -  responsive admin panel"/></a>
            <ul class="header_menu">
                <li class="list_icon"><a href="#">&nbsp;</a></li>
                <li class="settings_icon">
                    <a href="#" class="link_themeSettings">&nbsp;</a>
                    
                    <div id="themeSettings" class="popup">
                        <div class="head clearfix">
                            <div class="arrow"></div>
                            <span class="isw-settings"></span>
                            <span class="name">Theme settings</span>
                        </div>
                        <div class="body settings">
                            <div class="row-fluid">
                                <div class="span3"><strong>Style:</strong></div>
                                <div class="span9">
                                    <a class="styleExample tip active" title="Default style" data-style="">&nbsp;</a>                                    
                                    <a class="styleExample silver tip" title="Silver style" data-style="silver">&nbsp;</a>
                                    <a class="styleExample dark tip" title="Dark style" data-style="dark">&nbsp;</a>
                                    <a class="styleExample marble tip" title="Marble style" data-style="marble">&nbsp;</a>
                                    <a class="styleExample red tip" title="Red style" data-style="red">&nbsp;</a>                                    
                                    <a class="styleExample green tip" title="Green style" data-style="green">&nbsp;</a>
                                    <a class="styleExample lime tip" title="Lime style" data-style="lime">&nbsp;</a>
                                    <a class="styleExample purple tip" title="Purple style" data-style="purple">&nbsp;</a>                               
                                </div>
                            </div>                            
                            <div class="row-fluid">
                                <div class="span3"><strong>Background:</strong></div>
                                <div class="span9">
                                    <a class="bgExample tip active" title="Default" data-style="">&nbsp;</a>
                                    <a class="bgExample bgCube tip" title="Cubes" data-style="cube">&nbsp;</a>
                                    <a class="bgExample bghLine tip" title="Horizontal line" data-style="hline">&nbsp;</a>
                                    <a class="bgExample bgvLine tip" title="Vertical line" data-style="vline">&nbsp;</a>
                                    <a class="bgExample bgDots tip" title="Dots" data-style="dots">&nbsp;</a>
                                    <a class="bgExample bgCrosshatch tip" title="Crosshatch" data-style="crosshatch">&nbsp;</a>
                                    <a class="bgExample bgbCrosshatch tip" title="Big crosshatch" data-style="bcrosshatch">&nbsp;</a>
                                    <a class="bgExample bgGrid tip" title="Grid" data-style="grid">&nbsp;</a>
                                </div>
                            </div>                            
                            <div class="row-fluid">
                                <div class="span3"><strong>Fixed layout:</strong></div>
                                <div class="span9">
                                    <input type="checkbox" name="settings_fixed" value="1"/>
                                </div> 
                            </div>
                            <div class="row-fluid">
                                <div class="span3"><strong>Hide menu:</strong></div>
                                <div class="span9">
                                    <input type="checkbox" name="settings_menu" value="1"/>
                                </div>                                           
                            </div>                            
                        </div>
                        <div class="footer">                            
                            <button class="btn link_themeSettings" type="button">Close</button>
                        </div>
                    </div>                    
                    
                </li>                
            </ul>    
        </div>

        <div class="menu">                

            <div class="breadLine">            
                <div class="arrow"></div>
                <div class="adminControl active">
                    Hi, Aqvatarius
                </div>
            </div>

            <div class="admin">
                <div class="image">
                    <img src="img/users/aqvatarius.jpg" class="img-polaroid"/>                
                </div>
                <ul class="control">                
                    <li><span class="icon-comment"></span> <a href="messages.html">Messages</a> <a href="messages.html" class="caption red">12</a></li>
                    <li><span class="icon-cog"></span> <a href="forms.html">Settings</a></li>
                    <li><span class="icon-share-alt"></span> <a href="login.html">Logout</a></li>
                </ul>
                <div class="info">
                    <span>Welcom back! Your last visit: 24.10.2012 in 19:55</span>
                </div>
            </div>

            <ul class="navigation">            
                <li>
                    <a href="index.html">
                        <span class="isw-grid"></span><span class="text">Dashboard</span>
                    </a>
                </li>
                <li class="openable">
                    <a href="#">
                        <span class="isw-list"></span><span class="text">UI elements</span>
                    </a>
                    <ul>
                        <li>
                            <a href="ui.html">
                                <span class="icon-th"></span><span class="text">UI Elements</span>
                            </a>                  
                        </li>      
                        <li>
                            <a href="widgets.html">
                                <span class="icon-th-large"></span><span class="text">Widgets</span>
                            </a>                  
                        </li>                    
                        <li>
                            <a href="buttons.html">
                                <span class="icon-chevron-right"></span><span class="text">Buttons</span>
                            </a>                  
                        </li>   
                        <li>
                            <a href="icons.html">
                                <span class="icon-fire"></span><span class="text">Icons</span>
                            </a>                  
                        </li>          
                        <li>
                            <a href="grid.html">
                                <span class="icon-align-justify"></span><span class="text">Grid system</span>
                            </a>                  
                        </li>                          
                    </ul>                
                </li>          
                <li class="active">
                    <a href="forms.html">
                        <span class="isw-archive"></span><span class="text">Forms stuff</span>                 
                    </a>
                </li>                        
                <li class="openable">
                    <a href="#">
                        <span class="isw-chat"></span><span class="text">Messages</span>
                    </a>
                    <ul>
                        <li>
                            <a href="messages.html">
                                <span class="icon-comment"></span><span class="text">Messages widgets</span></a>

                                <a href="#" class="caption yellow link_navPopMessages">5</a>

                                <div id="navPopMessages" class="popup" style="display: none;">
                                    <div class="head clearfix">
                                        <div class="arrow"></div>
                                        <span class="isw-chats"></span>
                                        <span class="name">Personal messages</span>
                                    </div>
                                    <div class="body messages">

                                        <div class="item clearfix">
                                            <div class="image"><a href="#"><img src="img/users/aqvatarius.jpg" class="img-polaroid"/></a></div>
                                            <div class="info">
                                                <a href="#" class="name">Aqvatarius</a>
                                                <p>Lorem ipsum dolor. In id adipiscing diam. Sed lobortis dui ut odio tempor blandit. Suspendisse scelerisque mi nec nunc gravida quis mollis lacus dignissim.</p>
                                                <span>19 feb 2012 12:45</span>
                                            </div>
                                        </div>

                                        <div class="item clearfix">
                                            <div class="image"><a href="#"><img src="img/users/olga.jpg" class="img-polaroid"/></a></div>
                                            <div class="info">
                                                <a href="#" class="name">Olga</a>
                                                <p>Cras nec risus dolor, ut tristique neque. Donec mauris sapien, pellentesque at porta id, varius eu tellus.</p>
                                                <span>18 feb 2012 12:45</span>
                                            </div>
                                        </div>                        

                                        <div class="item clearfix">
                                            <div class="image"><a href="#"><img src="img/users/dmitry.jpg" class="img-polaroid"/></a></div>
                                            <div class="info">
                                                <a href="#" class="name">Dmitry</a>
                                                <p>In id adipiscing diam. Sed lobortis dui ut odio tempor blandit.</p>
                                                <span>17 feb 2012 12:45</span>
                                            </div>
                                        </div>                         

                                        <div class="item clearfix">
                                            <div class="image"><a href="#"><img src="img/users/helen.jpg" class="img-polaroid"/></a></div>
                                            <div class="info">
                                                <a href="#" class="name">Helen</a>
                                                <p>Sed lobortis dui ut odio tempor blandit. Suspendisse scelerisque mi nec nunc gravida quis mollis lacus dignissim. Donec mauris sapien, pellentesque at porta id, varius eu tellus.</p>
                                                <span>15 feb 2012 12:45</span>
                                            </div>
                                        </div>                                  

                                    </div>
                                    <div class="footer">
                                        <button class="btn link_navPopMessages" type="button">Close</button>
                                    </div>
                                </div>                                                                                                                          
                        </li>                                        
                    </ul>                


                </li>                                    
                <li>
                    <a href="statistic.html">
                        <span class="isw-graph"></span><span class="text">Statistics</span>
                    </a>
                </li>                                    
                <li>
                    <a href="tables.html">
                        <span class="isw-text_document"></span><span class="text">Tables</span>
                    </a>
                </li>   
                <li class="openable">
                    <a href="#">
                        <span class="isw-documents"></span><span class="text">Sample pages</span>
                    </a>
                    <ul>
                        <li>
                            <a href="user.html">
                                <span class="icon-info-sign"></span><span class="text">User info</span>
                            </a>   
                        </li>
                        <li>
                            <a href="profile.html">
                                <span class="icon-user"></span><span class="text">User profile</span>
                            </a>                  
                        </li>                                                   
                        <li>
                            <a href="users.html">
                                <span class="icon-list"></span><span class="text">Users</span>
                            </a>
                        </li>   
                        <li>
                            <a href="stream.html">
                                <span class="icon-refresh"></span><span class="text">Stream activity</span>
                            </a>
                        </li>           
                        <li>
                            <a href="mail.html">
                                <span class="icon-envelope"></span><span class="text">Mailbox</span>
                            </a>
                        </li>    
                        <li>
                            <a href="edit.html">
                                <span class="icon-pencil"></span><span class="text">User edit</span>
                            </a>                  
                        </li>          
                        <li>
                            <a href="faq.html">
                                <span class="icon-question-sign"></span><span class="text">FAQ</span>
                            </a>
                        </li>
                        <li>
                            <a href="search.html">
                                <span class="icon-search"></span><span class="text">Search</span>
                            </a>
                        </li>                        
                    </ul>                                
                </li>              
                <li class="openable">
                    <a href="#">
                        <span class="isw-zoom"></span><span class="text">Other</span>                    
                    </a>
                    <ul>
                        <li>
                            <a href="gallery.html">
                                <span class="icon-picture"></span><span class="text">Gallery</span>
                            </a>
                        </li>
                        <li>
                            <a href="typography.html">
                                <span class="icon-pencil"></span><span class="text">Typography</span>
                            </a>
                        </li>                       
                        <li>
                            <a href="wizard.html">
                                <span class="icon-share"></span><span class="text">Wizard</span>
                            </a>
                        </li>                        
                        <li>
                            <a href="files.html">
                                <span class="icon-upload"></span><span class="text">File handling</span>
                            </a>
                        </li>                                                        
                    </ul>
                </li>  
                <li class="openable">
                    <a href="#">
                        <span class="isw-cancel"></span><span class="text">Error pages</span>                    
                    </a>
                    <ul>                    
                        <li><a href="403.html"><span class="icon-warning-sign"></span><span class="text">403 Forbidden</span></a></li>
                        <li><a href="404.html"><span class="icon-warning-sign"></span><span class="text">404 Not Found</span></a></li>
                        <li><a href="500.html"><span class="icon-warning-sign"></span><span class="text">500 Internal Server Error</span></a></li>
                        <li><a href="503.html"><span class="icon-warning-sign"></span><span class="text">503 Service Unavailable</span></a></li>
                        <li><a href="504.html"><span class="icon-warning-sign"></span><span class="text">504 Gateway Timeout</span></a></li>
                    </ul>
                </li>                         
            </ul>

            <div class="dr"><span></span></div>

            <div class="widget-fluid">
                <div id="menuDatepicker"></div>
            </div>

            <div class="dr"><span></span></div>

            <div class="widget">

                <div class="input-append">
                    <input id="appendedInputButton" style="width: 118px;" type="text"><button class="btn" type="button">Search</button>
                </div>            

            </div>

            <div class="dr"><span></span></div>        

            <div class="widget-fluid">

                <div class="wBlock clearfix">
                    <div class="dSpace">
                        <h3>Last visits</h3>
                        <span class="number">6,302</span>                    
                        <span>5,774 <b>unique</b></span>
                        <span>3,512 <b>returning</b></span>
                    </div>
                    <div class="rSpace">
                        <h3>Today</h3>
                        <span class="mChartBar" sparkType="bar" sparkBarColor="white"><!--240,234,150,290,310,240,210,400,320,198,250,222,111,240,221,340,250,190--></span>                                                                                
                        <span>&nbsp;</span>
                        <span>65% <b>New</b></span>
                        <span>35% <b>Returning</b></span>
                    </div>
                </div>

            </div>        

        </div>

        <div class="content">
            

            <div class="breadLine">

                <ul class="breadcrumb">
                    <li><a href="#">Simple Admin</a> <span class="divider">></span></li>                
                    <li class="active">Forms stuff</li>
                </ul>

                <ul class="buttons">
                    <li>
                        <a href="#" class="link_bcPopupList"><span class="icon-user"></span><span class="text">Users list</span></a>

                        <div id="bcPopupList" class="popup">
                            <div class="head clearfix">
                                <div class="arrow"></div>
                                <span class="isw-users"></span>
                                <span class="name">List users</span>
                            </div>
                            <div class="body-fluid users">

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/aqvatarius_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Aqvatarius</a>                                    
                                        <span>online</span>
                                    </div>
                                </div>

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/olga_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Olga</a>                                
                                        <span>online</span>
                                    </div>
                                </div>                        

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/alexey_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Alexey</a>  
                                        <span>online</span>
                                    </div>
                                </div>                              

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/dmitry_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Dmitry</a>                                    
                                        <span>online</span>
                                    </div>
                                </div>                         

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/helen_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Helen</a>                                                                        
                                    </div>
                                </div>                                  

                                <div class="item clearfix">
                                    <div class="image"><a href="#"><img src="img/users/alexander_s.jpg" width="32"/></a></div>
                                    <div class="info">
                                        <a href="#" class="name">Alexander</a>                                                                        
                                    </div>
                                </div>                                  

                            </div>
                            <div class="footer">
                                <button class="btn" type="button">Add new</button>
                                <button class="btn btn-danger link_bcPopupList" type="button">Close</button>
                            </div>
                        </div>                    

                    </li>                
                    <li>
                        <a href="#" class="link_bcPopupSearch"><span class="icon-search"></span><span class="text">Search</span></a>

                        <div id="bcPopupSearch" class="popup">
                            <div class="head clearfix">
                                <div class="arrow"></div>
                                <span class="isw-zoom"></span>
                                <span class="name">Search</span>
                            </div>
                            <div class="body search">
                                <input type="text" placeholder="Some text for search..." name="search"/>
                            </div>
                            <div class="footer">
                                <button class="btn" type="button">Search</button>
                                <button class="btn btn-danger link_bcPopupSearch" type="button">Close</button>
                            </div>
                        </div>                
                    </li>
                </ul>

            </div>

            <div class="workplace">
                
                <div class="page-header">
                    <h1>Forms <small>Stuff</small></h1>
                </div>  
                
                <div class="row-fluid">

                    <div class="span12">
                        <div class="head clearfix">
                            <div class="isw-documents"></div>
                            <h1>Text fields</h1>
                        </div>
                        <div class="block-fluid">                        

                            <div class="row-form clearfix">
                                <div class="span3">Input type text:</div>
                                <div class="span9"><input type="text" value="some text value..."/></div>
                            </div> 

                            <div class="row-form clearfix">
                                <div class="span3">Input type password:</div>
                                <div class="span9"><input type="password" value="123123123"/></div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">Readonly input:</div>
                                <div class="span9"><input type="text" value="readonly input field..." readonly="readonly"/></div>                            
                            </div> 

                            <div class="row-form clearfix">
                                <div class="span3">Disabled input:</div>
                                <div class="span9"><input type="text" value="disabled input field..." disabled="disabled"/></div>
                            </div>                                       

                            <div class="row-form clearfix">
                                <div class="span3">Placeholder:</div>
                                <div class="span9"><input type="text" placeholder="placeholder..."/></div>
                            </div>                                                               

                            <div class="row-form clearfix">
                                <div class="span3">Textarea field:</div>
                                <div class="span9"><textarea name="textarea">Some text in textarea field...</textarea></div>
                            </div>                        

                            <div class="row-form clearfix">
                                <div class="span3">Textarea placeholder:</div>
                                <div class="span9"><textarea name="textarea" placeholder="Textarea field placeholder..."></textarea></div>
                            </div>                                                

                            <div class="footer tar">
                                <button class="btn">Submit</button>
                            </div>                            
                        </div>

                    </div>

                </div>

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span12">
                        <div class="head clearfix">
                            <div class="isw-favorite"></div>
                            <h1>WYSIWYG HTML Editor</h1>
                        </div>
                        <div class="block-fluid" id="wysiwyg_container">

                            <textarea id="wysiwyg" name="text" style="height: 300px;"></textarea>

                        </div>
                    </div>

                </div>            

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-list"></div>
                            <h1>Select fields</h1>
                        </div>
                        <div class="block-fluid">                        

                            <div class="row-form clearfix">
                                <div class="span5">Simple select:</div>
                                <div class="span7">
                                    <select name="select">
                                            <option value="0">choose a option...</option>
                                            <option value="1">Andorra</option>
                                            <option value="2">Antarctica</option>
                                            <option value="3">Bulgaria</option>
                                            <option value="4">Germany</option>
                                            <option value="5">Dominican Republic</option>
                                            <option value="6">Micronesia</option>
                                            <option value="7">United Kingdom</option>
                                            <option value="8">Greece</option>
                                            <option value="9">Italy</option>
                                            <option value="10">Ukraine</option>   
                                    </select>
                                </div>
                            </div>                                            

                            <div class="row-form clearfix">
                                <div class="span5">Multiple select:</div>
                                <div class="span7">
                                    <select name="select" multiple="multiple">                                    
                                            <option value="0">choose a option...</option>
                                            <option value="1">Andorra</option>
                                            <option value="2">Antarctica</option>
                                            <option value="3">Bulgaria</option>
                                            <option value="4">Germany</option>
                                            <option value="5">Dominican Republic</option>
                                            <option value="6">Micronesia</option>
                                            <option value="7">United Kingdom</option>
                                            <option value="8">Greece</option>
                                            <option value="9">Italy</option>
                                            <option value="10">Ukraine</option>                                    
                                    </select>
                                </div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span5">Simple Select2:</div>
                                <div class="span7">
                                    <select name="select" id="s2_1" style="width: 100%;">
                                        <option value="0">choose a option...</option>
                                        <optgroup label="Some group #1">
                                            <option value="1">Andorra</option>
                                            <option value="2">Antarctica</option>
                                            <option value="3">Bulgaria</option>
                                        </optgroup>
                                        <optgroup label="Some group #1">
                                            <option value="4">Germany</option>
                                            <option value="5">Dominican Republic</option>
                                            <option value="6">Micronesia</option>
                                            <option value="7">United Kingdom</option>
                                        </optgroup>
                                        <optgroup label="Some group #3">
                                            <option value="8">Greece</option>
                                            <option value="9">Italy</option>
                                            <option value="10">Ukraine</option>                                    
                                        </optgroup>                                 
                                    </select>
                                </div>
                            </div>           

                            <div class="row-form clearfix">
                                <div class="span5">Select2 multiple:</div>
                                <div class="span7">                                
                                    <select name="select" id="s2_2" style="width: 100%;" multiple="multiple">
                                        <option value="0">choose a option...</option>
                                        <optgroup label="Some group #1">
                                            <option value="1" selected="selected">Andorra</option>
                                            <option value="2">Antarctica</option>
                                            <option value="3">Bulgaria</option>
                                        </optgroup>
                                        <optgroup label="Some group #1">
                                            <option value="4">Germany</option>
                                            <option value="5">Dominican Republic</option>
                                            <option value="6">Micronesia</option>
                                            <option value="7">United Kingdom</option>
                                        </optgroup>
                                        <optgroup label="Some group #3">
                                            <option value="8">Greece</option>
                                            <option value="9">Italy</option>
                                            <option value="10">Ukraine</option>                                    
                                        </optgroup>                                  
                                    </select>
                                </div>
                            </div> 
                            
                            <div class="row-form clearfix">
                                <div class="span5">Tags input:</div>
                                <div class="span7">                                
                                    <input type="text" class="tags" value="PHP,JavaScript,CSS"/>
                                </div>
                            </div> 
                            
                        </div>
                    </div>                                       
                    
                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-target"></div>
                            <h1>Checkbox, radio and file fields</h1>
                        </div>
                        <div class="block-fluid">                        

                            <div class="row-form clearfix">
                                <div class="span5">Checkbox:</div>
                                <div class="span7">
                                    <label class="checkbox inline">
                                        <input type="checkbox" value="checkbox1"/> unchecked
                                    </label>
                                    <label class="checkbox inline">
                                        <input type="checkbox" value="checkbox2" checked="checked"/> checked
                                    </label>
                                </div>
                            </div> 
                            <div class="row-form clearfix">
                                <div class="span5">Disabled checkbox:</div>
                                <div class="span7">
                                    <label class="checkbox inline">
                                        <input type="checkbox" value="checkbox1" disabled="disabled"/> unchecked
                                    </label>
                                    <label class="checkbox inline">
                                        <input type="checkbox" value="checkbox2" disabled="disabled" checked="checked"/> checked
                                    </label>
                                </div>
                            </div>                          

                            <div class="row-form clearfix">
                                <div class="span5">Radio button:</div>
                                <div class="span7">
                                    <label class="checkbox inline">
                                        <input type="radio" name="radio1"/> unchecked
                                    </label>
                                    <label class="checkbox inline">
                                        <input type="radio" name="radio1" checked="checked"/> checked
                                    </label>
                                </div>
                            </div>                         
                            <div class="row-form clearfix">
                                <div class="span5">Disabled radio:</div>
                                <div class="span7">
                                    <label class="checkbox inline">
                                        <input type="radio" name="radio2" disabled="disabled"/> unchecked
                                    </label>
                                    <label class="checkbox inline">
                                        <input type="radio" name="radio2" disabled="disabled" checked="checked"/> checked
                                    </label>
                                </div>
                            </div>                                 

                            <div class="row-form clearfix">
                                <div class="span5">Input file:</div>
                                <div class="span7">                                                                
                                    <input type="file" name="file"/>
                                </div>
                            </div> 

                            <div class="row-form clearfix">
                                <div class="span5">iButton select:</div>
                                <div class="span7">
                                    <input type="checkbox" name="iexc_1" class="ibtn"/> 
                                    <input type="checkbox" name="iexc_1" checked="checked" class="ibtn"/> 
                                    <input type="checkbox" name="iexc_1" class="ibtn" disabled="disabled"/>
                                </div>
                            </div>                         
                            <div class="row-form clearfix">
                                <div class="span5">iButton radio:</div>
                                <div class="span7">
                                    <input type="radio" name="iexr_1" class="ibtn"/> 
                                    <input type="radio" name="iexr_1" checked="checked" class="ibtn"/> 
                                    <input type="radio" name="iexr_1" class="ibtn" disabled="disabled"/>                                
                                </div>
                            </div>                              
                            
                        </div>
                    </div>                

                </div>
                
                <div class="dr"><span></span></div>            
                
                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-cloud"></div>
                            <h1>Default multiselect</h1>
                        </div>
                        <div class="block">                        
                            
                            <select multiple class="multiselect" id="multiselect" name="test[]">                                
                                <option value="fr">France</option>
                                <option value="uk">United Kingdom</option>
                                <option value="us">United States</option>
                                <option value="ch">China</option>
                                <option value="au">Australia</option>
                                <option value="in">India</option>
                                <option value="ar">Argentina</option>
                                <option value="br">Brazil</option>
                                <option value="tb">Tibet</option>
                                <option value="co">Columbia</option>
                                <option value="cr">Croatia</option>
                                <option value="it">Italia</option>
                                <option value="es">Espana</option>
                                <option value="id">Indonesia</option>
                                <option value="du">Germany</option>
                                <option value="no">Norway</option>
                            </select>
                            
                        </div>
                    </div>

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-ok"></div>
                            <h1>Multiselect</h1>
                        </div>
                        <div class="block">                        

                            <select multiple class="multiselect" id="fmultiselect" name="ftest[]">                                
                                <option value="fr">France</option>
                                <option value="uk">United Kingdom</option>
                                <option value="us">United States</option>
                                <option value="ch">China</option>
                                <option value="au">Australia</option>
                                <option value="in">India</option>
                                <option value="ar">Argentina</option>
                                <option value="br" selected="selected">Brazil</option>
                                <option value="tb">Tibet</option>
                                <option value="co">Columbia</option>
                                <option value="cr">Croatia</option>
                                <option value="it">Italia</option>
                                <option value="es">Espana</option>
                                <option value="id">Indonesia</option>
                                <option value="du">Germany</option>
                                <option value="no">Norway</option>
                            </select> 
                            
                            <div class="btn-group">
                                <button class="btn btn-mini" id="multiselect-selectAll" type="button">Select All</button>
                                <button class="btn btn-mini" id="multiselect-deselectAll" type="button">Deselect All</button>
                                <button class="btn btn-mini" id="multiselect-selectIndia" type="button">Select India</button>                                
                            </div>                             
                        </div>
                    </div>

                </div>                
                
                
                <div class="dr"><span></span></div>            

                <div class="row-fluid">

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-cloud"></div>
                            <h1>Masked inputs</h1>
                        </div>
                        <div class="block-fluid">                        

                            <div class="row-form clearfix">
                                <div class="span3">Date:</div>
                                <div class="span9"><input type="text" id="mask_date"/> <span>Example: 04/10/2012</span></div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">Phone number:</div>
                                <div class="span9"><input type="text" id="mask_phone"/> <span>Example: 98 (765) 432-10-98</span></div>
                            </div>                                   

                            <div class="row-form clearfix">
                                <div class="span3">Credit card number:</div>
                                <div class="span9"><input type="text" id="mask_credit"/> <span>Example: 9876-5432-1098-7654</span></div>
                            </div>                                                           

                            <div class="row-form clearfix">
                                <div class="span3">TIN:</div>
                                <div class="span9"><input type="text" id="mask_tin"/> <span>Example: 98-7654321</span></div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">SSN:</div>
                                <div class="span9"><input type="text" id="mask_ssn"/> <span>Example: 987-65-4321</span></div>
                            </div>                                                 
                            
                            <div class="footer tal">
                                <button class="btn">Submit</button>
                            </div>                 
                        </div>
                    </div>

                    <div class="span6">
                        <div class="head clearfix">
                            <div class="isw-ok"></div>
                            <h1>Form validation</h1>
                        </div>
                        <div class="block-fluid">                        
                            <form id="validation" method="POST" action="http://aqvatarius.com/themes/aquarius_v17/submit.action">

                            <div class="row-form clearfix">
                                <div class="span3">Date:</div>
                                <div class="span9"><input value="" class="validate[required,custom[date]]" type="text" name="date" id="date"/> <span>Example: 2010-12-01</span></div>
                            </div>                         

                            <div class="row-form clearfix">
                                <div class="span3">E-mail:</div>
                                <div class="span9"><input value="" class="validate[required,custom[email]]" type="text" name="email" id="email" />  <span>Example: someone@nowhere.com</span></div>
                            </div>                                                                                 

                            <div class="row-form clearfix">
                                <div class="span3">Required:</div>
                                <div class="span9">        
                                    <select name="sport" id="sport" class="validate[required]" id="sport">
                                        <option value="">Choose a sport</option>
                                        <option value="option1">Tennis</option>
                                        <option value="option2">Football</option>
                                        <option value="option3">Golf</option>
                                    </select>
                                    <span>Required select field</span>
                                </div>                            
                            </div>                                                                                 

                            <div class="row-form clearfix">
                                <div class="span3">User name:</div>
                                <div class="span9">        
                                    <input value="" class="validate[required,maxSize[5]]" type="text" name="user" id="user"/>
                                    <span>Maximum 5 characters</span>
                                </div>
                            </div>      

                            <div class="row-form clearfix">
                                <div class="span3">Passowrd:</div>
                                <div class="span9">        
                                    <input value="" class="validate[required,minSize[5]]" type="password" name="password" id="password"/>
                                    <span>Minimum 5 characters</span>
                                </div>
                            </div>                 
                                
                            <div class="footer tar">
                                <button class="btn">Submit</button>
                            </div>                 
                                
                            </form>
                        </div>

                    </div>

                </div>

                <div class="dr"><span></span></div>

                <div class="row-fluid">

                    <div class="span12">
                        <div class="head clearfix">
                            <div class="isw-grid"></div>
                            <h1>Fields grid</h1>
                        </div>
                        <div class="block-fluid">                        

                            <div class="row-form clearfix">
                                <div class="span4"><input type="text" value="span4"/></div>
                                <div class="span4"><input type="text" value="span4"/></div>
                                <div class="span4"><input type="text" value="span4"/></div>                            
                            </div>                                                               

                            <div class="row-form clearfix">
                                <div class="span5"><input type="text" value="span5"/></div>
                                <div class="span5"><input type="text" value="span5"/></div>
                                <div class="span2"><input type="text" value="span2"/></div>                            
                            </div>                                                                             

                            <div class="row-form clearfix">
                                <div class="span6"><input type="text" value="span6"/></div>
                                <div class="span6"><input type="text" value="span6"/></div>                            
                            </div>                                                                                       

                            <div class="row-form clearfix">
                                <div class="span9"><input type="text" value="span9"/></div>
                                <div class="span3"><input type="text" value="span3"/></div>                            
                            </div>                                                                             

                            <div class="row-form clearfix">
                                <div class="span10"><input type="text" value="span10"/></div>                            
                                <div class="span2"><input type="text" value="span2"/></div>                                                        
                            </div>                                                                                                     

                            <div class="row-form clearfix">
                                <div class="span12"><input type="text" value="span12"/></div>                            
                            </div>                                                                             

                        </div>
                    </div>

                </div>            

                <div class="dr"><span></span></div>

            </div>

        </div>   
    </div>    
</body>

<!-- Mirrored from aqvatarius.com/themes/aquarius_v17/forms.html by HTTrack Website Copier/3.x [XR&CO'2013], Fri, 03 Jan 2014 16:42:44 GMT -->
</html>
